<template>
  <div class="modal-edit-box">
    <Form :model="roleForm" ref="roleForm" :rules="rules" :label-width="120">
      <Row class="code-row-bg">
        <Col span="24" style="border:none;">
          <Form-item :label="$t('module.userManage.roleId')" prop="id">
            <Input
              v-if="!roleInfo.id"
              :maxlength="64"
              :placeholder="$t('module.userManage.roleId')"
              v-model="roleForm.id"
            />
            <Input v-if="roleInfo.id" v-model="roleForm.id"  disabled />
          </Form-item>
        </Col>
      </Row>
      <Row class="code-row-bg">
        <Col span="24" style="border:none;">
          <Form-item :label="$t('module.userManage.roleName')" prop="name">
            <Input
              :placeholder="$t('module.userManage.roleName')"
              v-model="roleForm.name"
              :maxlength="255"
            />
          </Form-item>
        </Col>
      </Row>
    </Form>
  </div>
</template>

<script>
import { addRole, editUserGroup } from '@api/flowable/userManageAPI'
export default {
  name: 'roleEdit',
  props: {
    roleInfo: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      roleForm: {
        id: this.roleInfo.id || '',
        name: this.roleInfo.name || ''
      },
      rules: {
        id: [{ required: true, trigger: 'blur', message: this.$t('module.userManage.inputId') }],
        name: [{ required: true, trigger: 'blur', message: this.$t('module.userManage.inputName') }]
      },
      actions: [
        {
          text: this.$t('common.save'),
          theme: 'primary',
          handle: () => {
            this.save()
          },
          loading: false
        },
        {
          text: this.$t('common.close'),
          handle: () => {
            this.$emit('Close')
          }
        }
      ]
    }
  },
  created() {
    let titleText,
      text = this.$t('module.userManage.role')
    if (this.roleInfo.id) {
      titleText = this.$t('common.edit') + text
    } else {
      titleText = this.$t('common.create') + text
    }
    this.$emit('SetTitle', titleText)
    this.$emit('SetPageActions', this.actions)
  },
  methods: {
    _processServiceResponse(res, promputText) {
      this.actions[0].loading = false
      if (res) {
        this.$Message.success({
          content: promputText,
          duration: 3
        })

        //关闭当前窗口
        this.$emit('Close', this.roleInfo)
      }
    },
    save() {
      this.$refs['roleForm'].validate(valid => {
        if (valid) {
          this.actions[0].loading = true
          let process = this._processServiceResponse
          let id = this.roleInfo.id
          if (id) {
            editUserGroup(this.roleForm)
              .then(res => process(res, this.$t('common.updateSuccess')))
              .catch(() => (this.actions[0].loading = false))
          } else {
            addRole(this.roleForm)
              .then(res => process(res, this.$t('common.createSuccess')))
              .catch(() => (this.actions[0].loading = false))
          }
        }
      })
    }
  }
}
</script>

<style>
</style>
